<template>
  <div class="main-box">
    <div class="title">业务进度统计</div>
    <div>
      <el-tabs v-model="activeName">
        <el-tab-pane
          v-for="i in tabs"
          :key="i.name"
          :label="i.label"
          :name="i.name"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="search">
      <el-form
        :inline="true"
        :model="formDate"
        class="demo-form-inline"
        label-width="80px"
      >
        <el-form-item label="数据时间">
          <el-date-picker
            v-model="formDate.time"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="招标批次">
          <el-input
            v-model="formDate.aa"
            placeholder="请输入招标批次"
          ></el-input>
        </el-form-item>
        <el-form-item label="合同编号">
          <el-input
            v-model="formDate.bb"
            placeholder="请输入合同编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="物料编码">
          <el-input
            v-model="formDate.cc"
            placeholder="请输入物料编码"
          ></el-input>
        </el-form-item>
        <el-form-item label="供应商">
          <el-input v-model="formDate.dd" placeholder="请输入供应商"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="select"
            :loading="loading"
            class="btn"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table
        v-loading="loading"
        :data="tableData"
        height="450"
        border
        style="width: 100%"
      >
        <el-table-column prop="" label="序号" width="80"> </el-table-column>
        <el-table-column prop="" label="招标批次" width="180">
          <!-- <template slot-scope="scope">
            <el-tag
              :color="scope.row.website === 'ECP' ? '#249087' : 'blue'"
              disable-transitions
              effect="dark"
            >
              {{ scope.row.website }}</el-tag
            >
          </template> -->
        </el-table-column>
        <el-table-column prop="" label="合同编号" width="180">
        </el-table-column>
        <el-table-column prop="" label="物料编码" width="180">
        </el-table-column>
        <el-table-column prop="" label="供应商" width="180"> </el-table-column>
        <el-table-column prop="" label="当前进度" width="180">
        </el-table-column>
        <el-table-column prop="" label="当前状态" width="180">
        </el-table-column>
        <el-table-column prop="" label="已用时间"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "Progress",
  props: {},
  components: {},
  data() {
    return {
      activeName: "first",
      tabs: [
        {
          label: "批次合同",
          name: "first",
        },
        {
          label: "框架合同",
          name: "second",
        },
      ],
      formDate: {
        time: null,
        aa: "",
        bb: "",
        cc: "",
        dd: "",
      },
      loading: false,
      tableData: [],
    };
  },
  methods: {
    select() {
      this.loading = true;
    },
  },
};
</script>


<style lang="scss" scoped>
.main-box {
  padding: 20px;
  .title {
    font-size: 22px;
    font-weight: bold;
    color: #249087;
  }
  .search {
    padding: 10px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  }
  .table {
    margin-top: 10px;
  }
}
.btn {
  color: white;
  background-color: #249087;
  margin-left: 10px;
}
::v-deep .el-tabs__item.is-active {
  color: #249087;
}
::v-deep .el-tabs__item:hover {
  color: #249087;
  cursor: pointer;
}
::v-deep .el-tabs__active-bar {
  background-color: #249087;
}
</style>
